<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,
			body {
				width: 100%;
				height: 100%;
				font-size: 14px;
				padding: 0;
				margin: 0;
				
				--ani-dur: 4s;
				--ani-step: calc(var(--ani-dur)/4);
				--ani-a: 0.5s;
				--ani-b: 0.75s;
			}

			.star-container {
				position: relative;
				width: 100%;
				height: 100%;
				background-color: #000000;
				perspective: 100rem;
				transform-style: preserve-3d;
				perspective-origin: center center;
			}

			.star {
				position: absolute;
				left: 48%;
				top: 52%;
				width: 0.3rem;
				height: 0.3rem;
				background-color: transparent;
				border-radius: 50%;
				transform: translateZ(-100rem);
			}

			.star-1 {
				animation: ani-star var(--ani-dur) linear infinite;
			}

			.star-2 {
				animation: ani-star var(--ani-dur) linear var(--ani-step) infinite;
			}

			.star-3 {
				animation: ani-star var(--ani-dur) linear calc(var(--ani-step)*2) infinite;
			}

			.star-4 {
				animation: ani-star var(--ani-dur) linear calc(var(--ani-step)*3) infinite;
			}

			.star-a-1 {
				animation: ani-star var(--ani-dur) linear var(--ani-a) infinite;
			}

			.star-a-2 {
				animation: ani-star var(--ani-dur) linear calc(var(--ani-a) + var(--ani-step)) infinite;
			}

			.star-a-3 {
				animation: ani-star var(--ani-dur) linear calc(var(--ani-a) + var(--ani-step)*2) infinite;
			}

			.star-a-4 {
				animation: ani-star var(--ani-dur) linear calc(var(--ani-a) + var(--ani-step)*3) infinite;
			}

			.star-b-1 {
				animation: ani-star var(--ani-dur) linear var(--ani-b) infinite;
			}

			.star-b-2 {
				animation: ani-star var(--ani-dur) linear calc(var(--ani-b) + var(--ani-step)) infinite;
			}

			.star-b-3 {
				animation: ani-star var(--ani-dur) linear calc(var(--ani-b) + var(--ani-step)*2) infinite;
			}

			.star-b-4 {
				animation: ani-star var(--ani-dur) linear calc(var(--ani-b) + var(--ani-step)*3) infinite;
			}

			@keyframes ani-star {
				0% {
					opacity: 0;
					transform: translateZ(-100rem);
				}
				
				50%{
					opacity: 1;
				}

				100% {
					opacity: 1;
					transform: translateZ(100rem);
				}
			}
		</style>
	</head>
	<body>
		<div class="star-container">
		</div>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
		<script type="text/javascript">
			let generateShadow = function($item = null, color = '#fff') {
				let str = '';
				let max_width = window.innerWidth * 0.05;
				let max_height = window.innerHeight * 0.05;
				let half_width = max_width / 2;
				let half_height = max_height / 2;
				console.log(max_width);
				console.log(max_height);
				color = 'red';
				for (let i = 0; i < 10; i++) {
					let x = Math.floor(Math.random() * max_width) - half_width;
					let y = Math.floor(Math.random() * max_height) - half_height;
					let color = randomColor();
					str += `${x}rem ${y}rem 1px ${color},`
				}

				str = str.substring(0, str.length - 1);
				if ($item) {
					$item.css('box-shadow', str);
				}

				return str;
			}

			let generateID = function() {
				return Math.floor(Math.random() * 100000000).toString('');
			}

			let randomColor = function() {
				const r = Math.floor(Math.random() * 256);
				const g = Math.floor(Math.random() * 256);
				const b = Math.floor(Math.random() * 256);
				return `rgba(${r},${g},${b},1)`;
			}

			let addGroupStar = function() {
				const number = 4;
				let starArr = [];
				let boxshadow = generateShadow(null);
				let $starContainer = $('.star-container');
				let arrStarGroup = ['-a', '-b', ''];
				let starGroup = arrStarGroup[Math.floor(Math.random() * arrStarGroup.length)];
				for (let i = 0; i < number; i++) {
					let $star = $(`<div class="star star${starGroup}-${i+1}"></div>`);
					$star.css('box-shadow', boxshadow);
					starArr.push($star);
				}

				for (let $item of starArr) {
					$starContainer.append($item);
				}
			}

			for (let i = 0; i < 1; i++) {
				addGroupStar();
				addGroupStar();
				addGroupStar();
				addGroupStar();
				addGroupStar();
				addGroupStar();
			}
		</script>
	</body>
</html>
